'use client';
import { Component } from '@/cvcomponents';
import style from './index.module.scss';
import { exportAndDownloadByBuffer } from '@/util';
import { deleteResume, downloadFileById, getResumes } from '@/service';
import Confirm from '@/app/components/Confirm';
import classNames from 'classnames';
import Loading from '@/app/components/Loading';
import { useCommonStore } from '@/src/providers/common-store-provider';

const Index = ({ resumes }) => {
  const { myResumes, setMyResumes, isMobile } = useCommonStore((state) => {
    return {
      ...state,
      myResumes: state.myResumes.length ? state.myResumes : resumes,
    };
  });

  if (!myResumes.length) {
    return (
      <div style={{ padding: '40px ', textAlign: 'center', color: 'gray' }}>
        暂无简历
      </div>
    );
  }
  const onDelete = (item) => {
    deleteResume({
      id: item.personalDetails.id,
    }).then(async (res) => {
      if (res.code === 200) {
        const templates = await getResumes();
        if (templates.code === 200) {
          setMyResumes(templates.data);
        }
      }
    });
  };
  return myResumes.map((item) => {
    return (
      <div key={item?.personalDetails?.id} className={style.resumeItem}>
        <div key={item?.personalDetails?.id} className={style.previewWraper}>
          <div
            style={{
              transform: isMobile ? `scale(0.124)` : `scale(0.184)`,
              transformOrigin: 'left top',
            }}
          >
            {item ? (
              <Component fontScale={1} resume={item} isNeedPaging={false} />
            ) : null}
          </div>
        </div>
        <div className={style.cvContentWraper}>
          <div className={style.cvContent}>
            <div className={style.cvName}>{item.personalDetails.name}</div>
            <div className={style.des}>
              求职意向:
              <span>{item.personalDetails.expJob}</span>
              <span>{item.personalDetails.expCity}</span>
              {item.personalDetails.expectedSalary}
            </div>
          </div>
          <div className={style.btns}>
            <a
              className={style.btn}
              href={`/content?id=${item.personalDetails.id}`}
            >
              编辑
            </a>
            <div
              className={style.btn}
              onClick={async () => {
                if (isMobile) {
                  Confirm({
                    title: '提示',
                    content: (
                      <div>
                        目前不支持手机端下载，请至PC端进行免费下载
                        网址：www.jianli101.com
                      </div>
                    ),
                    onOk: async () => {},
                    okText: '确定',
                    cancelButtonProps: {
                      style: {
                        display: 'none',
                      },
                    },
                  });
                  return;
                }
                try {
                  Loading.open();
                  let res = await exportAndDownloadByBuffer(
                    downloadFileById({
                      resumeId: item.personalDetails.id || null,
                    }),
                  );
                  Loading.close();
                  // setDownloading(false);
                  if (!res) return;
                  Confirm({
                    content: '简历下载完成，请至电脑中查看！',
                    showCancelButton: false,
                    cancelButtonProps: {
                      style: {
                        display: 'none',
                      },
                    },
                  });
                } catch (e) {
                  Loading.close();
                }
              }}
            >
              下载
            </div>
            <div
              className={classNames(style.btn, style.danger)}
              onClick={() => {
                Confirm({
                  content: '删除后简历将无法恢复，确认删除？',
                  onOk: () => {
                    onDelete(item);
                  },
                });
              }}
            >
              删除
            </div>
          </div>
        </div>
      </div>
    );
  });
};

export default Index;
